<script setup lang="tsx">
import type { FormSchema } from '@/components/Form';
import { Form } from '@/components/Form';
import { IAgree } from '@/components/IAgree';
import { useI18n } from '@/hooks/useI18n';
import { useValidator } from '@/hooks/useValidator';
import { useCountdown } from '@vueuse/core';
import { ElButton, ElInput } from 'element-plus';
import { reactive, shallowRef, unref } from 'vue';

const countDownTime = shallowRef(60);
const {
  start: countDownStart,
  isActive: countDownIsActive,
  remaining: countDownRemaining,
  stop: countDownStop
} = useCountdown(countDownTime, {
  onTick() {}
});
const { t } = useI18n();
const { required } = useValidator();
const emit = defineEmits(['to-login']);

const rules = reactive({
  username: [required()],
  password: [required()],
  confirmPassword: [required()],
  verifyCode: [required()]
});
const schema = reactive<FormSchema[]>([
  {
    field: 'title',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: () => {
          return <h2 class="text-2xl font-bold text-center w-full">{t('login.register')}</h2>;
        }
      }
    }
  },
  {
    field: 'username',
    colProps: {
      span: 24
    },
    component: 'Input',
    label: t('login.username'),
    componentProps: {
      placeholder: t('login.usernamePlaceholder')
    }
  },
  {
    field: 'password',
    colProps: {
      span: 24
    },
    component: 'InputPassword',
    label: t('login.password'),
    componentProps: {
      placeholder: t('login.passwordPlaceholder'),
      strength: true
    }
  },
  {
    field: 'confirmPassword',
    colProps: {
      span: 24
    },
    component: 'InputPassword',
    label: t('login.confirmPassword'),
    componentProps: {
      placeholder: t('login.passwordPlaceholder'),
      strength: true
    }
  },
  {
    field: 'verifyCode',
    colProps: {
      span: 24
    },
    label: t('login.verifyCode'),
    formItemProps: {
      slots: {
        default: (formData) => {
          return (
            <>
              <div class="flex-center w-full">
                <ElInput v-model={formData.verifyCode} placeholder={t('login.verifyCodePlaceholder')} class={'mr-10px'} />
                <ElButton type="primary" onClick={getVerifyCode} disabled={unref(countDownIsActive)}>
                  {t('login.getVerifyCode')}
                  {unref(countDownIsActive) ? `${unref(countDownRemaining)}s` : ''}
                </ElButton>
              </div>
            </>
          );
        }
      }
    }
  },
  {
    field: 'agree',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: (formData: any) => {
          return <IAgree v-model={formData.agree} text="我同意《用户协议》" link={[{ text: '《用户协议》', link: '/register' }]} />;
        }
      }
    }
  },
  {
    field: 'submit',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: () => (
          <>
            <div class="w-full">
              <ElButton type="primary" class={'w-full'} onClick={submit} disabled={unref(countDownIsActive)}>
                {t('login.register')}
              </ElButton>
            </div>
            <div class="w-full mt-15px">
              <ElButton class={'w-full'} onClick={gotoLogin} disabled={unref(countDownIsActive)}>
                {t('login.hasAccount')}
              </ElButton>
            </div>
          </>
        )
      }
    }
  }
]);

const getVerifyCode = async () => {
  countDownStart(countDownTime);
  await _sleep(4000);
  countDownStop();
};

const _sleep = async (time: number) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const submit = async (formData: any) => {
  console.log('提交注册表单', formData);
};

const gotoLogin = () => {
  emit('to-login');
};
</script>
<template>
  <Form :schema="schema" :rules="rules" label-position="top" hide-required-asterisk class="dark:(border-[var(--el-border-color)] border-1 border-solid)" />
</template>
